import * as React from 'react';
import ReactEcharts from 'echarts-for-react'
// 引入 ECharts 主模块
import * as echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';



class EchartsTest extends React.Component {
  getVirtulData = (year) => {
    year = year || '2017';
    // const date = + echarts.number.parseDate(year + '-01-01');
    // const end = +echarts.number.parseDate((+year + 1) + '-01-01');
    const date = + (year + '-01-01');
    const end = +((+year + 1) + '-01-01');
    const dayTime = 3600 * 24 * 1000;
    const data = [];
    for (let time = date; time < end; time += dayTime) {
      data.push([
        // echarts.format.formatTime('yyyy-MM-dd', time),
        time,
        Math.floor(Math.random() * 1000)
      ]);
    }
    return data;
  };
  getOption = () => {
    return {
      tooltip: {
        position: 'top'
      },
      visualMap: {
        min: 0,
        max: 1000,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        top: 'top'
      },

      calendar: [{
        range: '2017',
        cellSize: ['auto', 20]
      }, {
        top: 260,
        range: '2016',
        cellSize: ['auto', 20]
      }],

      series: [{
        type: 'heatmap',
        coordinateSystem: 'calendar',
        calendarIndex: 0,
        data: this.getVirtulData(2017)
      }, {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        calendarIndex: 1,
        data: this.getVirtulData(2016)
      }]
    };
  }

  render() {
    return (
      <ReactEcharts
        option={this.getOption()}
        notMerge={true}
        lazyUpdate={true}
        theme={"theme_name"}
      />
    );
  }
}

export default EchartsTest;
